<template>
    <div>
        <div>
            <el-form :inline="true" size="mini">
                <el-form-item label="商品名称" v-if="!chart">
                    <el-input v-model="search.product_name" size="mini" style="width:130px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="交易方" v-if="!chart">
                    <el-input v-model="search.proceed_user" size="mini" style="width:130px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="收/支" v-if="!chart">
                    <el-select v-model="search.income_or_disburse" style="width:130px;" placeholder="请选择收/支" clearable>
                        <el-option v-for="item in classify" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="!chart">
                    <div>
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                    </div>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-form-item style="float: right;">
                    <el-switch v-model="chart" active-text="" inactive-text="只显示图表"> </el-switch>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="!chart">
            <el-table :data="data" border style="width: 100%">
                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                <el-table-column prop="product_name" label="商品名称"></el-table-column>
                <el-table-column label="金额" width="100" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.amount_money / 100}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="proceed_user" label="交易方" width="180" align="center"></el-table-column>
                <el-table-column prop="income_or_disburse" label="收/支" width="80" align="center"></el-table-column>
                <el-table-column label="账单分类" width="120" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.bill_type}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="bill_source" label="交易来源地" width="250" align="center"></el-table-column>
                <el-table-column prop="bill_create_time" label="交易时间" width="170" align="center"></el-table-column>
                <el-table-column prop="money_status" label="资金状态" width="80" align="center"></el-table-column>
                <el-table-column prop="bill_status" label="交易状态" width="80" align="center"></el-table-column>
                <el-table-column prop="remarks" label="备注" width="120" align="center"></el-table-column>
                <el-table-column label="操作" width="180px" align="center">
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" @click="$router.push({path: '/article/edit',query: {id: scope.row.id}})" size="mini">编辑</el-button> -->
                        <el-button type="danger" @click="onDel(scope.row)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 15px auto;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="p"
                    :page-sizes="[ 10, 15, 30, 50, 100]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </div>
        <charts />
    </div>
</template>

<script>
import {axget,axpost} from '@/components/api/index'
import charts from './charts'
export default {
    components:{charts},
    data(){
        return {
            loading: false,
            data: [],
            total: 0,
            p:1,
            limit: 15,
            chart: true,
            search: {
                product_name: '',
                proceed_user: '',
                income_or_disburse: ''
            },
            classify:[
                { value: '支出',label: '支出' },
                { value: '收入',label: '收入' },
                { value: '其它',label: '其它' }
            ]
        }
    },
    created(){
        this.onLoad()
    },
    methods:{
        onLoad(){
            this.getList({
                p: this.p,
                limit: this.limit,
                search: this.search
            })
        },
        onSearch(){
            let param = this.search
            this.getList({
                p: 1,
                limit: this.limit,
                search: param
            })
            this.p = 1
        },
        getList(where){
            this.loading = true

            axpost('/bills',where).then(res=>{
                if(res){
                    this.data = res.list
                    this.total = res.total
                }
                this.loading = false
            })
        },
        handleChange(val){
            // console.log(val)
        },
        onEdit(row){
            //
        },
        onDel(row){
            this.$confirm('确认删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                // axpost('/articles/remove',{id:row.id}).then(res => {
                //     let data = res.data
                //     if(res.status === 200 && data.status === 200){
                //         this.$message.success('删除成功')
                //         this.onLoad()
                //     }else{
                //         this.$message.warning('删除失败')
                //     }
                //     this.loading = false
                // })
            }).catch(r=>{})
            
        },
        handleCurrentChange(val){
            this.p = val
            this.onLoad()
        },
        handleSizeChange(val){
            this.limit = val
            this.onLoad()
        }
    }
}
</script>